<template>
	<view class="browse">
		<view class="items" v-for="(item,index) in datas.data" :key="item.id">
			<view @click="handlepath(item)">
				<image class="itemimg" :src="item.images[0]" mode=""></image>
			</view>
			<div class="content">
				<p class="tit">{{item.desc}}</p>
				<p class="desc" @click="inputDialog.open()">
					卖家:{{item.title}}
					<span class="times">今天:{{item.time}}</span>
				</p>
			</div>
			<image class="moreimg" @click="handleshow" src="../../../static/tyh/more.png" mode=""></image>
			<view class="animate__animated animate__slideInUp" v-show="showmake===true">
				<view class="footer-one">
					<view>
						<image class="fanhui" src="../../../static/tyh/返回.png" mode=""></image>
					</view>
					<text class="dier" @click="handlesc(index)">从浏览记录中移除</text>
				</view>
				<view class="footer-two" @click="handleshow()">
					<text class="xdiyi">取消</text>
				</view>
			</view>
			<view class="animate__animated animate__fadeOutDown" v-show="showmake===false">
				<view class="footer-one">
					<view>
						<image class="fanhui" src="../../../static/tyh/返回.png" mode=""></image>
					</view>
					<text class="dier">从浏览记录中移除</text>
				</view>
				<view class="footer-two" @click="handleshow()">
					<text class="xdiyi">取消</text>
				</view>
			</view>
		</view>
		<!-- <view :class=["showmake === true ?  'animate__animated animate__slideInUp' : 'animate__animated aanimate__fadeOutDown'"]> -->

	</view>
	<!-- 	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!"
			@confirm="dialogInputConfirm">
		</uni-popup-dialog>
	</uni-popup> -->
</template>

<script>
	import {
		onMounted,
		reactive,
		ref,
	} from "vue";
	export default {
		setup() {
			let showmake = ref(null)
			let inputDialog = ref(null)
			let datas = reactive({
				data: []
			})
			let dialogInputConfirm = async (val) => {
				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })
				console.log(val);
				hobbys.list.push({
					text: val,
					value: val
				})
				inputDialog.value.close()
				// setTimeout(() => {
				// 	uni.hideLoading()
				// 	console.log(val)
				// 	this.value = val
				// 	// 关闭窗口后，恢复默认内容
				// 	this.$refs.inputDialog.close()
				// }, 3000)
			}
			onMounted(() => {
				let data = wx.getStorageSync('browse')
				datas.data = data
			})

			function handleshow() {
				showmake.value = !showmake.value
			}

			function handlepath(item) {
				uni.navigateTo({
					url: '/pages/web/twk/detail?obj=' + JSON.stringify(item),
				})
			}

			function handlesc(index) {
				let data = wx.getStorageSync('browse')
				uni.removeStorage({
					key: 'browse',
					success: function(index) {
						console.log('success');
					}
				});
				// data.splice(index,1)
				// console.log(index)
				// console.log(data)
			}

			return {
				inputDialog,
				dialogInputConfirm,
				showmake,
				handleshow,
				datas,
				handlepath,
				handlesc
			}
		}
	}
</script>

<style lang="less">
	.browse {
		width: 100%;
		height: 100vh;
		background-color: #dedede;

		.animate__animated {
			width: 100%;
			height: 16vh;
			position: fixed;
			bottom: 70px;

			.footer-one {
				display: flex;
				width: 100%;
				height: 120rpx;
				background-color: #fff;

				.fanhui {
					width: 60rpx;
					height: 60rpx;
					margin-top: 30rpx;
					margin-left: 40rpx;
				}

				.dier {
					font-size: 21px;
					line-height: 120rpx;
					margin-left: 30rpx;
				}
			}

			.footer-two {
				width: 100%;
				height: 135rpx;
				background-color: #fff;
				margin-top: 12rpx;

				.xdiyi {
					font-size: 21px;
					line-height: 135rpx;
					margin-left: 340rpx;
				}
			}
		}

		.items {
			display: flex;
			height: 150rpx;
			background-color: #fff;
			margin-top: 20rpx;

			.itemimg {
				width: 100rpx;
				height: 100rpx;
				// width: 00rpx;
				// height: 100rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
			}

			.moreimg {
				width: 60rpx;
				height: 60rpx;
				margin-top: 45rpx;
				margin-right: 30rpx;
			}

			.content {
				margin-left: 30rpx;
				flex: 1;

				.tit {
					width: 75%;
					margin-top: 25rpx;
					font-size: 35rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.desc {
					margin-top: 5rpx;
					color: #787878;
					font-size: 29rpx;

					.times {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>